<template>
    <div id="userCheck">

         <!--用户信息-->
        <div id="word">
            <!--后退-->
            <img class="back" src="../../assets/task/back.png" alt="" onclick="history.go(-1)">

            <div id="del">
                <!--头部遮罩层-->
                <div class="nav"></div>
                <div class="nav1">
                    <div style="margin-top:-5rem;">
                            <img style="border-radius:50%;height:18rem;width:18rem;"src="../../assets/test.jpg" alt="">
                    </div>
                </div>
                <div class="nav2"></div>
                <!--文本内容-->
                <div class="userHeader">
                    <div class="userImg" >
                        <img :src="accMess.userModel.headPortrait" alt="">
                    </div>
                    <!--标题-->
                    <div class="title">
                        <div class="userShopTit">
                            <div class="shopName" style="display:flex;">
                                <p style="font-size:1rem;">{{accMess.userModel.nickName}}</p>
                                <img style="height:0.8rem;width:0.8rem;margin-left:0.4rem;margin-top:0.15rem;" src="../../assets/task/male.png" alt="">
                            </div>
                            <div  class="stars">
                                <img v-for="item in total" src="../../assets/tabber/starHav.png" alt="">
                                <img v-for="item in untotal" src="../../assets/tabber/unstarHav.png" alt="">
                            </div>
                        </div>
                        <!--内容-->
                        <div class="userShopExp">
                            {{accMess.shopExplain}}
                        </div>
                        <!--时间-->
                        <div class="serTime">
                            <p>承诺服务时间</p>
                            <p>{{accMess.openDay1}} {{accMess.openDay2}} {{accMess.beginOpenTime}}-{{accMess.endOpenTime}}</p>
                        </div>
                        <!--参数-->
                        <div class="parameter">
                                <p>评价数：<span>{{accMess.userModel.totalEvaluateNumber}}</span></p>
                                <p>交易数：<span>{{accMess.transactionSum}}</span></p>
                        </div>
                    </div>
                </div>
            </div>

            <!--商铺列表-->
            <div class="shopListxwy" >
                    <div id="shop" v-for="item in sererMess.list">
                        <div class="shopTitle">
                            <img class="shopImg" :src="item.userModel.headPortrait" alt="">
                            <div class="shopName">
                                <div class="serverInfo">
                                    {{item.serverName}}
                                    <div class="star">
                                        <img v-for="item in star" src="../../assets/tabber/starHav.png" alt="">
                                        <img v-for="item in unstar" src="../../assets/tabber/unstarHav.png" alt="">
                                    </div>
                                </div>
                                <div class="next" @click="checkDetail(item.id)">详情 ></div>
                            </div>
                        </div>
                        <div class="shopCon">
                            <div class="particulars">
                                <p v-if="item.topExplainJson.input1==undefined">
                                    <img style="width:100%;height:100%" :src="item.topExplainJson.common1" class="avatar1">
                                </p>
                                <p v-else="item.topExplainJson.common1==undefined">
                                    {{item.topExplainJson.input1}}
                                </p>
                            </div>
                            <div style="margin:auto;width:30%;">
                                <div class="upper">
                                   <p v-if="item.topExplainJson.input2==undefined">
                                        <img style="width:100%;height:100%" :src="item.topExplainJson.common2" class="avatar1">
                                    </p>
                                    <p v-else="item.topExplainJson.common2==undefined">
                                        {{item.topExplainJson.input2}}
                                    </p>
                                </div>
                                <div class="lower">
                                    <p v-if="item.topExplainJson.input3==undefined">
                                        <img style="width:100%;height:100%" :src="item.topExplainJson.common3" class="avatar1">
                                    </p>
                                    <p v-else="item.topExplainJson.common3==undefined">
                                        {{item.topExplainJson.input3}}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
        total:undefined,
        untotal:undefined,
        star:undefined,
        unstar:undefined,
        forms:{
            pageSize:4,
            pageNumber:1,
        },
        sererMess:[],
        accMess:{
            userModel:{
                headPortrait:undefined,
            }
        }
    }
  },
  created(){
      this.getAccreditMessById()
      this.getServerById()
  },
  methods:{
    //  查看详情
    checkDetail(id){
        this.$router.push({path:'/taskComment/'+id})
    },
    // 获取达人信息
    getAccreditMessById(){
          this.$api.getAccreditMessById(this.$route.params.id).then((res)=>{
              if(res.code=='000000'){
                    this.accMess = res.data
                    this.total = this.accMess.totalStar;
                    this.untotal = 5-Number(this.total)
              }
          })
    },
    // 获取全部达人服务
    getServerById(){
        this.$api.getServerById(this.forms).then((res)=>{
              if(res.code=='000000'){
                    this.sererMess = res.data
                    this.sererMess.list.forEach((item)=>{
                        item.topExplainJson = JSON.parse(item.topExplainJson)
                        this.star=item.totalStar
                        this.unstar = 5-Number(this.star)
                    })
              }
          })
    },
  }
}
</script>
<style>
#userCheck .shopListxwy{
  position: absolute;
  top: 8.75rem;
  left: 0;
  right: 0;
  margin:auto;
  height:80vh;
  overflow-y: auto;
}
#userCheck #word{
    width:100%;
    position:absolute;
    z-index:4;
}
#userCheck #word .back{
    position:fixed;
    height:1.1rem;
    width:0.6rem;
    top:1.25rem;
    left:1.25rem;
    z-index:666;
}

#userCheck #del{
    width:100%;
    height:20vh;
    position:absolute;
    top:0;
}
#userCheck #del .nav{
    height:20vh;
    width:100%;
    background:#2f9a90;
    position:absolute;
    z-index:1;
    filter: blur(0.41500000000000004rem);
}

#userCheck #del .nav1{
    height:20vh;
    width:100%;
    overflow:hidden;
    position:absolute;
    z-index:2;
    filter: blur(0.41500000000000004rem);
}
#userCheck #del .nav2{
    border-bottom:1px solid #ffffff;
    height:20vh;
    width:100%;
    background:rgba(225,225,255,0.83);
    position:absolute;
    z-index:3;
}
#userCheck #del .userHeader{
    position:absolute;
    z-index:4;
    display:flex;
    justify-content:space-between;
    width:100%;
    height:20vh;
    padding:5vw 5vw 3vw 10vw;
}
#userCheck #del .userHeader .userImg{
    margin-top:1rem;
    text-align:center;
}
#userCheck #del .userImg img{
    height:3.5rem;
    width:3.5rem;
    border-radius:50%;
    border:1px solid white;
}
#userCheck #del .title{
    width:80%;
}
#userCheck #del .title .userShopTit{
    width:100%;
    display:flex;
    justify-content:space-between;
}
#userCheck #del .title .shopName{
    display:flex;
}
#userCheck #del .title .userShopTit .stars {
    width:40%;
    display:flex;
    justify-content:space-between;
    margin-top:0.1rem;
}
#userCheck #del .title .userShopTit .stars > img{
    height:1rem;
    width:1rem;
}
#userCheck #del .title .userShopExp{
    width:100%;
    height:6vh;
    margin:0.5rem 0px;
    font-size:0.8rem;
    color:#2da295;
}
#userCheck #del .title .serTime{
    height:1.1rem;
    line-height:1.1rem;
    padding:0px 0.15rem;
    width:80%;
    background:#fbfbfb;
    display:flex;
    justify-content:space-between;
    font-size:0.7rem;
    color:#2da295;
}
#userCheck #del .title .parameter{
    height:1.25rem;
    line-height:1.25rem;
    width:80%;
    font-size:0.7rem;
    color:#2da295;
    display:flex;
    justify-content:space-between;
}
#userCheck #del .title .stuSwitch{
    position:absolute;
    right:3vw;
    top:15vh;
}
#userCheck #shop{
    padding:0.8rem;
    box-shadow:2px 2px 10px 2px #e2e2e2;
    width:93%;
    margin:3vh auto;
    border-radius:7px;
    background:#fff;
}
#userCheck #shop .shopTitle{
    display:flex;
    font-size:1rem;
}
#userCheck #shop .shopImg{
    width:2rem;
    height:2rem;
    margin:auto 0.25rem;
}
#userCheck #shop .shopName{
    width:100%;
    display:flex;
    justify-content:space-between;
}
#userCheck #shop .shopName .serverInfo{
    font-size:0.9rem;
    color:#8b8b8b;
    width:70%;
}
#userCheck #shop .shopName .star{
    width:50%;
    display:flex;
    justify-content:space-between;
}
#userCheck #shop .shopName .star > img{
    height:0.75rem;
    width:0.75rem;
}
#userCheck #shop .next{
    width:3.5rem;
    margin-right:0.75rem;
    text-align:center;
    line-height:1.5rem;
    height:1.5rem;
    font-size:0.8rem;
    background:#c4e1c6;
    border-radius:7px;
    color:#ffffff;
}
#userCheck #shop .shopCon{
    display:flex;
    justify-content:space-between;
    margin-top:0.9rem;
    font-size:0.9rem;
}
#userCheck #shop .particulars{
    height:13rem;
    border-radius:7px;
    overflow:scroll;
    width:75%;
    border:7px solid #29a193;
}
#userCheck #shop .upper{
    height:6.5rem;
    overflow:scroll;
    width:100%;
    border-radius:7px;
    word-break:break-all;
    border:7px solid #c4e1c6;
}
#userCheck #shop .lower{
    height:6.5rem;
    overflow:scroll;
    width:100%;
    border-radius:7px;
    word-break:break-all;
    border:7px solid #69b373;
}
</style>
